<template>
  <q-toolbar class="status-bar overflow-hidden" :class="$q.dark.isActive ? 'bg-grey-8' : ''">
    <div class="q-space ellipsis">当前文件：{{ filePath || '&lt;未保存&gt;' }}</div>

    <template v-if="pointerPos">
      <q-separator vertical spaced="12px" color="white" />
      <div class="q-mr-sm text-no-wrap">当前坐标：({{ pointerPos.x }}, {{ pointerPos.y }})</div>
    </template>

    <q-separator vertical spaced color="white" />
    <table style="min-width: 120px">
      <tr>
        <td class="q-pl-xs text-no-wrap">视图缩放：</td>
        <q-selectable-td
          style="width: 40px; height: 24px"
          v-model="viewZoom"
          :options="viewZoomOptions"
          :display-value="viewZoomValue"
          inline
          hide-dropdown-icon
          emit-value
          map-options
          auto-save
          behavior="menu"
          menu-anchor="top right"
          menu-self="bottom right"
          :menu-offset="[12, -8]"
        >
          <div class="dense-font">{{ viewZoomValue }}</div>
        </q-selectable-td>
      </tr>
    </table>

    <q-separator vertical spaced color="white" />
    <table style="min-width: 120px">
      <tr>
        <td class="q-pl-xs text-no-wrap">界面缩放：</td>
        <q-selectable-td
          style="width: 40px; height: 24px"
          v-model="uiZoom"
          :options="uiZoomOptions"
          :display-value="uiZoomValue"
          inline
          hide-dropdown-icon
          emit-value
          map-options
          auto-save
          behavior="menu"
          menu-anchor="top right"
          menu-self="bottom right"
          :menu-offset="[12, -8]"
        >
          <div class="dense-font">{{ uiZoomValue }}</div>
        </q-selectable-td>
      </tr>
    </table>

    <q-separator vertical spaced color="white" />
    <q-btn
      v-for="(info, name) in panelToggles"
      :key="name"
      class="q-mx-xs"
      :class="toggleColor(name)"
      flat
      dense
      :icon="info.icon"
      @click="toggleClicked(name, info)"
    >
      <q-tooltip content-class="text-no-wrap">{{ info.tips }}</q-tooltip>
    </q-btn>

    <q-icon class="q-ml-sm" name="drag_indicator" />
  </q-toolbar>
</template>

<script>
// 【状态栏】
import { mapState } from 'vuex'
import { mapStateRW } from 'boot/utils'

// 面板开关
const PANEL_TOGGLES = {
  leftPanel: {
    icon: 'mdi-dock-left',
    tips: '左侧面板'
  },
  rightPanel: {
    icon: 'mdi-dock-right',
    tips: '右侧面板'
  }
}

export default {
  data: () => ({
    panelToggles: PANEL_TOGGLES
  }),

  computed: {
    ...mapState('main', ['viewZoomLevels', 'uiZoomLevels']),
    ...mapStateRW('main', [...Object.keys(PANEL_TOGGLES), 'viewZoom', 'uiZoom']),
    ...mapState('file', ['filePath']),
    ...mapState('edit', ['pointerPos']),

    // 视图缩放比例选项
    viewZoomOptions() {
      return this.viewZoomLevels.map(value => ({ label: Math.round(value * 1000) / 10 + '%', value }))
    },

    // 视图缩放比例显示值
    viewZoomValue() {
      return Math.round(this.viewZoom * 1000) / 10 + '%'
    },

    // 界面缩放比例选项
    uiZoomOptions() {
      return this.uiZoomLevels.map(value => ({ label: Math.round(value * 1000) / 10 + '%', value }))
    },

    // 界面缩放比例显示值
    uiZoomValue() {
      return Math.round(this.uiZoom * 100) + '%'
    }
  },

  methods: {
    // 开关按钮颜色
    toggleColor(name) {
      return this[name] ? '' : 'toggle-off'
    },

    // 点击开关按钮
    toggleClicked(name, info) {
      this[name] = !this[name]
      info.handler && info.handler()
    }
  }
}
</script>

<style lang="scss" scoped>
tr ::v-deep {
  .q-field__native,
  .q-field__marginal {
    color: white;
  }
}
</style>
